﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>模态框案例</title>
    <style>
        .modal{
            display: block;
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
            background-color: rgba(0,0,0,0.5);
        }
        .modal-content{
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-between;
            width: 50%;
            max-width: 700px;
            height: 40%;
            max-height: 500px;
            margin: 100px auto;
            border-radius:10px;
            background-color:#fff;
            -webkit-animation: zoom 0.6s;
            animation: zoom 0.6s;
            resize: both;
            overflow: auto;
        }
        @-webkit-keyframes zoom{
            from {-webkit-transform: scale(0)}
            to {-webkit-transform: scale(1)}
        }
        @keyframes zoom{
            from {transform: scale(0)}
            to {transform: scale(1)}
        }
        .modal-header{
            box-sizing:border-box;
            border-bottom:1px solid #ccc;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .modal-header span:first-child{
            display: block;
            margin-block-start: 1.33em;
            margin-block-end: 1.33em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
            margin-left:20px;
        }
        .close{
            color: #b7b7b7;
            font-size: 30px;
            font-weight: bold;
            margin-right: 20px;
            transition: all 0.3s;
        }
        .close:hover, .close:focus{
            color: #95b4ed;
            text-decoration: none;
            cursor: pointer;
        }
        .modal-body{
            padding: 10px;
            font-size: 16px;
            box-sizing:border-box;
        }
        .modal-footer{
            box-sizing:border-box;
            border-top:1px solid #ccc;
            display: flex;
            padding: 15px;
            justify-content: flex-end;
            align-items: center;
        }
        .modal-footer button{
            width: 60px;
            height: 35px;
            padding: 5px;
            box-sizing: border-box;
            margin-right: 10px;
            font-size: 16px;
            color: white;
            border-radius: 5px;
            background-color: cornflowerblue;
        }
        .modal-footer button:hover, .modal-footer button:focus{
            background-color: #95b4ed;
            cursor: pointer;
        }
        @media only screen and (max-width: 700px){
            .modal-content {
                width: 80%;
            }
        }
    </style>
</head>
<body>
<h1>模态框案例</h1><br/>

<div id="app">
    {{name}}<br/>

    <button @click="modalShow">模态框展示</button>
    <modal :modaltoggle="btnShow" @close="modalHide"></modal>
</div>
<script src="../js/vue-2.5.16.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>

<template id="dialog">

    <!--self该事件的意思是只有点击div才会触发，从里面的子元素冒泡上来的事件不处理-->
    <div v-show="modaltoggle" class="modal" @click.self="hide">
        <div class="modal-content">
            <header class="modal-header">
                <span>模态框标题</span>
                <span class="close" @click="hide">×</span>
            </header>
            <div class="modal-body">
                <p>HTML+CSS+JS原生实现响应式模态框演示！</p>
            </div>
            <footer class="modal-footer">
                <button id="cancel" @click="hide">取消</button>
                <button id="sure" @click="hide">确定</button>
            </footer>
        </div>
    </div>

</template>
<script>

    //子组件
    let modal = {
        template:'#dialog',
        props:{
            modaltoggle:{
                default:false
            }
        },
        methods:{
            hide(){
                this.$emit('close',false);
            }
        }
    };

    var app = new Vue({
        el:'#app',
        data:{
            name:'模版数据',
            btnShow:false
        },
        methods:{
            modalShow(){
                this.btnShow = true;
            },
            modalHide(val){
                this.btnShow = val;
            }
        },
        components:{
            modal
        }
    });
</script>

</body>
</html>